<template>
  <div class="app-container">
    <el-table :data="tableData">
      <el-table-column label="url">
        <template #default="scope">
          <span>{{ urlData(scope.row.url) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="device_name" label="device_name" />
      <el-table-column prop="dy_group" label="dy_group" />
      <el-table-column prop="dy_upload_count" label="dy_upload_count" />
      <el-table-column
        prop="dy_upload_success_count"
        label="dy_upload_success_count"
      />
      <el-table-column prop="dy_rocket_cold" label="dy_rocket_cold" />
      <el-table-column label="dy_next_work_time">
        <template #default="scope">
          <span>{{ timeData(scope.row.dy_next_work_time) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Operations">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleEdit(row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!--编辑-->
    <el-dialog v-model="dialogFormVisible" title="数据修改" width="500">
      <el-form :model="form">
        <el-form-item label="url" prop="url">
          <el-input v-model="form.url" />
        </el-form-item>
        <el-form-item label="device_name" prop="device_name">
          <el-input v-model="form.device_name" />
        </el-form-item>
        <el-form-item label="dy_group" prop="dy_group">
          <el-input v-model="form.dy_group" />
        </el-form-item>
        <el-form-item label="dy_upload_count" prop="dy_upload_count">
          <el-input v-model="form.dy_upload_count" />
        </el-form-item>
        <el-form-item
          label="dy_upload_success_count"
          prop="dy_upload_success_count"
        >
          <el-input v-model="form.dy_upload_success_count" />
        </el-form-item>
        <el-form-item label="dy_rocket_cold" prop="dy_rocket_cold">
          <el-input v-model="form.dy_rocket_cold" />
        </el-form-item>
        <el-form-item label="dy_next_work_time" prop="dy_next_work_time">
          <el-input v-model="form.dy_next_work_time" />
        </el-form-item>
        <el-form-item label="ks_upload_count" prop="ks_upload_count">
          <el-input v-model="form.ks_upload_count" />
        </el-form-item>
        <el-form-item
          label="ks_upload_success_count"
          prop="ks_upload_success_count"
        >
          <el-input v-model="form.ks_upload_success_count" />
        </el-form-item>
        <el-form-item label="ks_next_work_time" prop="ks_next_work_time">
          <el-input v-model="form.ks_next_work_time" />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="saveData">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const dialogFormVisible = ref(false);
const form = ref({});
/*
 * url格式化
 * */
const urlData = (url) => {
  // 使用split方法获取倒数第二个斜杠后的部分
  const parts = url.split("/");
  if (parts.length >= 2) {
    return parts[parts.length - 2];
  }
  return "";
};
/**
 * 时间格式化
 * @param time
 */
const timeData = (time) => {
  if (time) {
    const date = new Date(time);
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
  }
};
const handleEdit = (row) => {
  form.value = { ...row };
  dialogFormVisible.value = true;
};

// 保存编辑
const saveData = () => {
  const index = tableData.value.findIndex(
    (item) => item.url === form.value.url
  );
  if (index !== -1) {
    tableData.value.splice(index, 1, form.value);
  }
  dialogFormVisible.value = false;
};
// 取消编辑
const cancelEdit = () => {
  dialogVisible.value = false;
};
const tableData = ref([
  {
    url: "http://127.0.0.1:9001/api/show/861616044990753_b2935841/",
    device_name: "一加七",
    dy_group: "8001",
    dy_upload_count: 0,
    dy_upload_success_count: 0,
    dy_rocket_cold: 0,
    dy_next_work_time: "2024-03-21T07:37:00Z",
    ks_upload_count: 0,
    ks_upload_success_count: 0,
    ks_next_work_time: null,
  },
  {
    url: "http://127.0.0.1:9001/api/show/861616044990753_b2935842/",
    device_name: "一加七",
    dy_group: "8001",
    dy_upload_count: 0,
    dy_upload_success_count: 0,
    dy_rocket_cold: 0,
    dy_next_work_time: "2024-03-21T07:37:00Z",
    ks_upload_count: 0,
    ks_upload_success_count: 0,
    ks_next_work_time: null,
  },
  {
    url: "http://127.0.0.1:9001/api/show/861616044990753_b2935843/",
    device_name: "一加七",
    dy_group: "8001",
    dy_upload_count: 0,
    dy_upload_success_count: 0,
    dy_rocket_cold: 0,
    dy_next_work_time: "2024-03-21T07:37:00Z",
    ks_upload_count: 0,
    ks_upload_success_count: 0,
    ks_next_work_time: null,
  },
]);
</script>
